<template>
  <div class="tag">
    <el-button
        class="collapseItem"
        plain
        @click="collapseMenu"
        icon="el-icon-menu"
        size="mini"
      ></el-button>
    <el-tag
      plain
      size="mini"
      v-for="(item, index) in this.tagList"
      :key="index"
      :closable="item.code !== 'home'"
      :effect="$route.name === item.code ? 'dark' : 'plain'"
      :url="item.url"
      @click="clickTag(item)"
      @close="closeTag(item, index)"
    >{{ item.name }}
    </el-tag
    >
  </div>
</template>

<script>

import {mapState} from "vuex";

export default {
  name: 'CommonTag',
  computed: {
    ...mapState("tag",['tagList'])
  },
  created () {

  },
  methods: {
    clickTag(item) {
      //场景：编辑后跳转页面，再点标签
      if(item.url){
        this.$router.push(item.url);
        return;
      }
      this.$router.push({
        name: item.code
      })
    },
    // 全局控制侧边栏的展开
    collapseMenu() {
      this.$bus.$emit("collapseMenu")
    },
    closeTag(item, index) {
      // 获取列表的最大索引值
      const maxIndex = this.tagList.length - 1
      if (item.code === this.$route.name) { // 判断关闭的标签是不是当前页，如果不是当前页，就直接关闭
        if (index === maxIndex) { // 如果关闭的标签是最右边的标签，就将页面跳转到相邻右侧的标签所示的页面
          this.$router.push({
            name: this.tagList[index - 1].code
          })
        } else {
          this.$router.push({
            name: this.tagList[index + 1].code
          })
        }
      }
      this.$store.commit('tag/CLOSE_TAG', item) // 关闭标签
    }
  }

}
</script>

<style lang="less" scoped>
.tag {
  padding: 10px;
  margin-left: 10px;

  .el-tag {
    margin-right: 15px;
    cursor: pointer;
  }
}

.collapseItem {
  padding: 0;
    position: relative;
    top: 4px;
    left: -15px;
}
</style>
